<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>我是主页标题</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">


    </script>
</head>
<body>

<p style="font-weight:bold;" id="sub_title">子页面加载完成后，将在此处显示子页面title</p>

<iframe width="500" height="300" id="frame"></iframe>

<p>
    <button onclick="loadFrame('sub_1.jsp');">load sub page</button>
</p>

<script type="text/javascript">

    function loadFrame(page) {

        var $frame = $("#frame");
        $frame.attr("src", page); //加载页面

        $frame.one("load", function () {
            var subWin = document.getElementById("frame").contentWindow; //获取子窗口的window对象

            $("#sub_title").html(subWin.document.title);

            subWin.fun();
        });
    }

    /**
     * 提供给子页面调用的函数
     * @param arg
     */
    function fun(arg) {
        alert("main页面的fun方法被frame页面调用，参数为： " + arg);
    }

</script>
</body>
</html>